/* ========================================================================== Dark Mode overrides Activated by (toggled via main.js, persisted in localStorage). Every rule here only needs to override colors — layout stays identical to style.css. ========================================================================== */ body.dark-mode { --color-paper: #14151c; --color-paper-dim: #1d1f29; --color-line: #33354a; --color-text: #e7e7ee; --color-text-muted: #000000; --color-ink: #0d0e14; --color-white: #1c1d27; /* "card" surfaces */ --color-gold: #d8ac4f; background: var(--color-paper); color: var(--color-text); } body.dark-mode .site-header, body.dark-mode .icon-btn, body.dark-mode .dropdown-menu { background: var(--color-white); border-color: var(--color-line); } body.dark-mode .dropdown-menu a { color: #e7e7ee; } body.dark-mode .dropdown-menu a:hover { background: #262838; color: var(--color-gold); } body.dark-mode .icon-btn { color: #e7e7ee; } body.dark-mode .icon-btn:hover { background: var(--color-crimson); border-color: var(--color-crimson); color: #fff; } body.dark-mode .brand-text .brand-name { color: #f4f4f8; } body.dark-mode ::selection { background: var(--color-crimson); color: #fff; } body.dark-mode .auth-main { filter: none; background: #14151c; color: #e7e7ee; } body.dark-mode .auth-main img, body.dark-mode .auth-main video, body.dark-mode .auth-main iframe, body.dark-mode .auth-main picture { filter: none; } body.dark-mode .auth-wrap, body.dark-mode .auth-form-panel { background: #1c1d27; border-color: #33354a; } body.dark-mode .auth-title { color: #f4f4f8; } body.dark-mode .auth-subtitle, body.dark-mode .auth-divider, body.dark-mode .checkbox-row label, body.dark-mode .auth-switch { color: #c2c3d0; } body.dark-mode .auth-main a, body.dark-mode .password-toggle { color: #8fe0ab; } body.dark-mode .auth-main a:hover, body.dark-mode .password-toggle:hover, body.dark-mode .password-toggle.is-visible { color: #b7f0c8; } body.dark-mode .auth-main .form-group label { color: #c2c3d0; } body.dark-mode .auth-main .form-control { background: #12131a; border-color: #4a4c60; color: #f4f4f8; } body.dark-mode .auth-main .form-control::placeholder { color: #a4a5b8; } body.dark-mode .auth-main .form-control:focus { border-color: #8fe0ab; } body.dark-mode .auth-main .pill-tag-neutral { background: #262838; border-color: #4a4c60; color: #e7e7ee; } body.dark-mode .auth-main .social-btn { background: #262838; border-color: #4a4c60; color: #e7e7ee; } body.dark-mode .auth-main .social-btn:hover { background: #303247; border-color: #696b82; } body.dark-mode .auth-main .checkbox-row input[type="checkbox"] { accent-color: #8fe0ab; } body.dark-mode .auth-main .form-success-banner { background: #163020; border-color: #2e6b45; color: #8fe0ab; }